<template>
  <div class="hello">
    <!-- 下半部分 -->
    <div class="content_bottom">
      <!-- 间隔 -->
      <div class="jg">
        <div class="txt">间隔：</div>
        <el-select v-model="value1" filterable placeholder="7512组合电器">
          <el-option v-for="item in option1" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
      <!-- 表格 -->
      <div class="table_content">
        <table class="JCSJ_table2">
          <thead>
            <tr class="tab_header">
              <td style="width: 15%;"></td>
              <td style="width:150px;">7513断路器动作次数</td>
              <td style="width:150px;">75131刀闸动作次数</td>
              <td style="width:150px;">75131刀闸动作次数</td>
            </tr>
          </thead>
          <tbody id="tb" class="JCSJStatus">
            <tr v-for="(item, index) in jcsjData" :key="index">
              <td style="width: 15%;">{{ item.name }}</td>
              <td style="width:150px;">{{ item.value_dianLIu }}</td>
              <td style="width:150px;">{{ item.value_IMu }}</td>
              <td style="width:150px;">{{ item.value_IIMu }}</td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 曲线 -->
      <div class="xiao_title">7513断路器动作次数分析图</div>
      <div id="tu"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import jh from "../assets/jh.png";
export default {
  name: 'DongZuoCiShu',
  data() {
    return {
      // 打压次数的数据
      jcsjData: [
        {
          name: "电气",
          value_dianLIu: "235次",
          value_IMu: "175次",
          value_IIMu: "175次"
        },
        {
          name: "机械",
          value_dianLIu: "225次",
          value_IMu: "165次",
          value_IIMu: "165次"
        },
        {}
      ],
      jh,
      // 间隔的下拉菜单
      option1: [
        {
          value: "选项1",
          label: "数据1"
        },
        {
          value: "选项2",
          label: "数据2"
        },
        {
          value: "选项3",
          label: "数据3"
        },
        {
          value: "选项4",
          label: "数据4"
        },
        {
          value: "选项5",
          label: "数据5"
        }
      ],
      // 
      value1: "",
    }
  },
  props: {
    msg: String
  },
  mounted() {
    this.zx_data()
  },
  methods: {
    // 折线图
    zx_data() {
      console.log(echarts);
      var myChart = echarts.init(document.getElementById("tu"));
      myChart.resize({
        width: 594,
        height: 260
      });

      // 配置折线图选项
      var option = {
        legend: {
          textStyle: {
            color: "#fff"
          },
        },
        tooltip: {},
        dataset: {
          source: [
            ['product', '电气', '机械'],
            ['7513断路器', 235, 225],
            ['75131刀闸', 175, 165],
            ['75132刀闸', 175, 165],
            ['751317地刀', 170, 150],
            ['751327地刀', 180, 200]
          ]
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          max: 250,
          axisLine: {
            show: true
          },
          axisLabel: {
            color: '#fff'
          },
          splitLine: {
            lineStyle: {
              color: '#40486a'
            }
          }
        },
        series: [{ type: 'bar' }, { type: 'bar' }]
      };

      // 使用配置项绘制饼图
      myChart.setOption(option);
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.hello {
  color: #fff;
}

// 下半部分
.content_bottom {
  width: 594px;
  height: 446px;

  // 间隔
  .jg {
    width: 210px;
    height: 30px;
    display: flex;
    // background-color: purple;

    .txt {
      width: 72px;
      height: 30px;
      color: #fff;
      // text-align: end;
      margin-top: 5px;
    }

    ::v-deep .el-select .el-input__inner {
      height: 30px;
      background-color: #202f3e;
      border-radius: 2px;
      color: #fff;
      border: solid 1px #40486a;
      padding: 0 6px;
    }

    ::v-deep .el-input__suffix {
      margin-top: 4px;
    }
  }

  // // 小标题
  .xiao_title {
    width: 564px;
    height: 16px;
    font-family: MicrosoftYaHei;
    font-size: 16px;
    /* margin-right: 42px; */
    text-align: left;
    padding-left: 28px;
    line-height: 16px;
    background: url(../assets/title-BG.png) no-repeat;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #40e5f0;
    // flex: 0.1;
    /* 占据右边的剩余空间 */
  }

  // background-color: pink;
  #tu {
    width: 594px;
    height: 225px;
  }
}

.table_content {
  width: 556px;
  height: 173px;
  margin-top: 10px;
  // height: 200px;
}

.JCSJ_table2 {
  width: 100%;
  height: 130px;
  font-size: 15px;
  font-weight: bold;
  color: #c6d3ec;
  border: 1px solid #343d59;
  // 合并相邻的边框线
  border-collapse: collapse;

  img {
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
  }

  tr {
    display: table;
    box-sizing: border-box;
    table-layout: fixed;
    height: 40px;
    width: 100%;

    // 鼠标移动到tr上时改变颜色
    &:hover {
      background-color: #424c6d;
    }
  }

  td {
    width: 38px;
    border: 1px solid #343d59;
  }

  thead {
    background-color: #101d29;
    height: 38px;

    .tab_header {
      // height: 100%;
      background-color: #1d2638;
    }
  }

  // // 纵向内容超出现滚动条
  tbody {
    display: block;
    height: 120px;
    // 宽度计算：100%+滚动条的宽度，避免和表头没对齐
    width: calc(100% + 4px);
    -webkit-overflow-scrolling: touch;
    // 当数据少于等于三条时，滚动条会消失
    overflow-y: scroll;
    padding-right: 5px;
    cursor: pointer;

    // 整个滚动条
    &::-webkit-scrollbar {
      -webkit-appearance: none;
      width: 4px;
      height: 20px;
    }

    // 滚动条轨道
    &::-webkit-scrollbar-track {
      // background-color: pink;
      border-radius: 0;
    }

    // 滚动条上的滑道
    &::-webkit-scrollbar-thumb {
      cursor: pointer;
      border-radius: 0px;
      background-image: url("../assets/JCSJ_xialatiao.png");
      // background-color: skyblue;
      transition: color 0.2s ease;
    }
  }
}

table tr:nth-child(odd) {
  background-color: #202f3e;
}
</style>